<template>
	<view :style="{'fontFamily':themeColor.typeface,'color':themeColor.main_font_color}">
		<u-sticky offset-top="0">
			<nuoyu-header></nuoyu-header>
		</u-sticky>
		
		<!-- 商品轮播图 -->
		<u-swiper :list="list1"  
			height="300"
			 @change="e => currentNum = e.current"
			 indicatorStyle="right: 20px"
			 >
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text"
				  >{{ currentNum + 1 }}/{{ list1.length }}</text
				>
			  </view>
		</u-swiper>
		
		<view class="centerContent" v-if="screenWidth > 0">
			<view class="timeLimit" :style="{'--main-bg-color':themeColor.main_color,'width':`${screenWidth-25}px`}">
				<view class="timeFont">限时抢购</view>
				<view style="display: flex;flex-direction: column;gap: 10rpx;">
					<view style="color: white;display: flex;align-items: center;justify-content: flex-end">
						<span>距离时间</span>
						<image style="width: 48rpx;" src="../../static/nuoyu-goods/right.png" mode="widthFix"></image>
					</view>
					<view class="timeColor" :style="'--main-bg-color:'+themeColor.main_color">
						 <u-count-down
						        :time="30 * 60 * 60 * 1000"
						        format="DD:HH:mm:ss"
						        autoStart
						        millisecond
						        @change="onChange"
						    >
						        <view class="time">
						            <text class="time__item">{{ timeData.days }}&nbsp;天</text>
						            <text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
						            <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
						            <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
						        </view>
						    </u-count-down>
					</view>
				</view>
			</view>
			
			<view class="goods">
				<view class="goods-header">
					<view class="goods-left">
						<view  class="goods-header-left" :style="'--main-bg-color:'+themeColor.main_color">
							<view>
								<span style="font-size: 46rpx;">￥{{goodsDetails.goodsPrice}}</span><span></span>
							</view>
							<!-- <view style="display: flex;gap: 5rpx;">
								<view v-for="(item,index) in labelList" class="label" :style="'--main-bg-color:'+themeColor.main_color">
									商品
								</view>
								 
							</view> -->
							
						</view>
						<view >
							<span class="huaxian" :style="'--main-font_assist:'+themeColor.font_assist">￥{{goodsDetails.scribePrice}}</span> <span style="font-size: 28rpx;margin-left: 20rpx;color: #ccc;">库存:{{goodsDetails.stockNum}}</span>
						</view>
					</view>
					<view class="goods-header-right" :style="'--main-font_assist:'+themeColor.font_assist">销售{{count}}</view>
				</view>
				
				<view class="goods-name">
					{{goodsDetails.goodsName}}
				</view>
				<!-- 未设置规格 -->
				<view v-if="goodsDetails.subtitle" class="goods-sku" :style="'--main-font_assist:'+themeColor.font_assist">
					<!-- 规格:洗面奶一瓶,面膜一盒,洁面巾1包 -->
					{{goodsDetails.subtitle}} 
				</view>
				
				<view class="goods-type">
					<view v-for="(item,index) in labelList" class="goods-type-label" :style="'--main-font_assist:'+themeColor.font_assist">
						<view v-if="item.image">
							<image  style="height: 32rpx;width: 32rpx;border-radius: 6rpx;position: relative;top: 4rpx;border: 1px solid #eee;" :src="wechatConfig.tencent‌Domain+item.image" mode="aspectFill"></image>
						</view>
						<view class="label" :style="{color:item.fontColor,border:`${item.borderColor} solid 1px`,backgroundColor:item.backgroundColor}">
							<!-- <image style="width: 32rpx;border-radius: 6rpx;" src="../../static/nuoyu-goods/ziying.jpg" mode="widthFix"></image> -->
							
							<span>{{item.labelName}}</span>
						</view>
					</view>
					
					<!-- <view class="goods-type-label" :style="'--main-font_assist:'+themeColor.font_assist">
						<image style="width: 42rpx;border-radius: 6rpx;" src="../../static/nuoyu-goods/ziying.jpg" mode="widthFix"></image>
						<span>自营</span>
					</view> -->
				</view>
			</view>
			
			<view class="goods" style="margin-top: 20rpx;border:1px solid #eee;">
				<view style="display: flex;align-items: center;gap: 20rpx;justify-content: space-between;">
					<view class="" style="color: #ccc;display: flex;align-items: center;gap: 20rpx;">
						<view>
							服务
						</view>
						
						<view style="display: flex;flex-direction: column;gap: 10rpx;" @click="storeShow = true">
							<view style="display: flex;gap: 10rpx;" :style="{'color':themeColor.font_assist}">
								<view>
									<image style="width: 32rpx;" src="../../static/nuoyu-goods/baozhang.png" mode="widthFix"></image>
								</view>
								<view>
									品质保障 · 售后无忧
								</view>
							</view>
							<view :style="{'color':themeColor.main_font_color}">
								正品保障 · 极速发货 · 七天无理由
							</view>
						</view>
					</view>
					
					
					<view >
						<image style="width: 22rpx;" src="../../static/nuoyu-goods/right-huise.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view class="goods" style="margin-top: 20rpx;border:1px solid #eee;">
				<view style="display: flex;align-items: center;gap: 20rpx;justify-content: space-between;">
					<view class="" style="color: #ccc;display: flex;gap: 20rpx;flex-direction: column;padding: 10rpx 10rpx 10px;">
						<view :style="{'color':themeColor.main_font_color}">
							商品评论 (9999+)
						</view>
						<view style="display: flex;flex-direction: column;gap: 20rpx;">
							<view style="display: flex;align-items: center;gap: 20rpx;">
								<image style="width: 68rpx;border-radius: 50%;" src="../../static/nuoyu-goods/ziying.jpg" mode="widthFix"></image>
								<view>
									<view :style="{'color':themeColor.main_font_color}">
										微信用户
									</view>
									<view style="font-size: 22rpx;" :style="{'color':themeColor.font_assist}">
										2025-01-25 09:30:00
									</view>
								</view>
							</view>
							
							<view :style="{'color':themeColor.main_font_color}">
								东西很好用放心用，用了长生不老，不死不灭
							</view>
							
						</view>
				 
						 
					</view>
					
					
					<view >
						<image style="width: 22rpx;" src="../../static/nuoyu-goods/right-huise.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			
			<view v-if="storeList.length>0" class="goods" style="margin-top: 20rpx;border:1px solid #eee;">
				<view style="display: flex;align-items: center;gap: 20rpx;justify-content: space-between;">
					<view class="" style="color: #ccc;display: flex;gap: 20rpx;">
						<view :style="{'color':themeColor.main_font_color}">
							<image style="width: 88rpx;height: 88rpx;;border-radius: 8rpx;" :src="storeList[0].otherConfigJson.logo" mode="aspectFill"></image>
						</view>
						
						<view style="display: flex;flex-direction: column;justify-content: space-around">
							<view style="font-weight: bold;" :style="{'color':themeColor.main_font_color}">{{storeList[0].businessName}}</view>
							<view style="font-size: 22rpx;color: rgba(0, 0, 0, .6);">{{storeList[0].otherConfigJson.businessDesc}}</view>
						</view>
						 
					</view>
					<view>
						<!-- <image style="width: 22rpx;" src="../../static/nuoyu-goods/right-huise.png" mode="widthFix"></image> -->
						<view @click="toStore" style="padding: 8rpx 16rpx;border-radius: 6rpx;font-size: 22rpx;" :style="{'color':themeColor.main_color,'border':`1px solid ${themeColor.main_color}`}">
							进店看看
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="goodsDetails.contents" class="goods" style="margin-top: 20rpx;border:1px solid #eee;">
				<view style="display: flex;align-items: center;gap: 20rpx;justify-content: space-between;">
					<view class="" style="color: #ccc;display: flex;gap: 20rpx;flex-direction: column;width: 100%;">
						<view :style="{'color':themeColor.main_font_color}">
							商品详情
						</view>
						<view class="u-content">
						    <u-parse :content="goodsDetails.contents"></u-parse>
						  </view>
						<!-- <u-parse :content="goodsDetails.contents"></u-parse> -->
						<!-- <view v-html="goodsDetails.contents">
							
						</view> -->
					</view>
				 
				</view>
				
			</view>
			
			
			<!-- 热卖（本店铺销量最多的4个） -->
			<view>
				
			</view>
			
			<view style="height: 120rpx;"></view>
			
		</view>
		
		<view style="height: 160rpx;"></view>
		
		<view style="position: fixed;width: 100%;background: white;z-index: 99;" :style="{'top':screenHeight-65+'px'}">
			<aiGoodsAction @click="optionsClick" :options="options" :buttons="buttons" @clickButton="clickButton"></aiGoodsAction>
		</view>

		<u-popup round="8" :show="storeShow" mode="bottom"  @close="close" >
			<view class="popupBg">
				 <view style="text-align: center;">服务说明</view>
				 
				 <view style="margin-top: 40rpx;padding: 0 20rpx;display: flex;flex-direction: column;gap: 40rpx;">
					<view v-for="(item,index) in serviceGuaranteeList">
						<view style="display: flex;align-items: center;gap: 16rpx;" :style="{'color':themeColor.main_font_color}">
							<image style="width: 32rpx;" :src="wechatConfig.tencent‌Domain+item.icon" mode="widthFix"></image>
							<span>{{item.title}}</span>
						</view>
						<view style="margin-top: 20rpx;padding-left: 45rpx;" :style="{'color':themeColor.font_assist}">
							{{item.details}}
						</view>
					</view>
				 </view>
			</view>
		</u-popup>
		
		<u-popup round="8" :show="storeShowAddress" mode="bottom"  @close="closeAddress" >
			<view class="popupBg">
				<nuoyu-address @settingAddress="settingAddress" :addAddressShow="addAddressShow" @delAddress="delAddress" :addressList="addressList" :colors="themeColor.main_color"></nuoyu-address>
			</view>
		</u-popup>

		 
		<nuoyu-payment :tencent‌Domain="wechatConfig.tencent‌Domain" :goodsDetails="goodsDetails" :stock="stock" :type="buttons.text=='立即购买'?'多规格':'单规格'" v-if="money!=0" :main-color="themeColor.main_color" :money="money" :show="payVisible" @cancel="cancelPayHandle" @success="successPayHandle"></nuoyu-payment>
		<!--  :default-select-index="selectedIndex"
		  :specifications-props="specificationsProps" -->
		  
		<echone-sku
		  :show="popupShow"
		  :theme-color="themeColor.main_color"
		  :combinations="combinations"
		  :specifications="specifications"
		  @close="handleClose"
		  @confirm="handleConfirm"
		  @joinShoppingCart="joinShoppingCartSku"
		></echone-sku>
	</view>
</template>

<script>
import aiGoodsAction  from "@/components/ai-goods-action/ai-goods-action.vue"
import echoneSku from '@/components/echone-sku/echone-sku.vue'
	export default{
		components:{
			aiGoodsAction
		},
		data(){
			return{
				serviceGuaranteeList:[],
				labelList:[],
				stock:1,
				addAddressShow:true,
				addressList:[],
				storeShowAddress:false,
				payVisible: false,
				money:0,
				specifications: [],
				combinations: [],
				popupShow:false,
				storeList:[],
				uuid:'',
				options:[
					{
						text:'客服',
						icon:'chat'
					},
					{
						text:'收藏',
						icon:'heart'
					},
					{
						text:'加入购物',
						icon:'cart',
						info:'0'
					}
				],
				buttons:{
					text:'立即购买',
					background:'',
				},
				timeData: {},
				currentNum:0,
				goodsDetails:{},
				list1: [],
				themeColor:"",
				screenWidth:0,
				screenHeight:0,
				storeShow:false,
				goods_id:'',
				count:0,
				businessId:'',
				quantity:1,
				optionsObj:'',
				wechatConfig:'',
				businessName:'',
				goodsSku:{},
				business_info:{},
				skuData:{}
			}
		},
		onLoad(options) {
			if(!uni.getStorageSync('userInfo').openid){
				// uni.reLaunch({
				// 	url:"/pages/tabbar/my"
				// })
			}
			
			const info = uni.getSystemInfoSync();
			 
			this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
			this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
		 
			
			this.screenHeight = info.screenHeight;
			this.screenWidth = info.screenWidth
			
			this.buttons.background = this.themeColor.main_color
			let that = this
			this.getGoodsDetails(options);
			this.getShoppingCartNum(options);
			if(options.businessId)
				this.getStore(options);
			this.optionsObj = options
			
		},
		methods:{
			joinShoppingCartSku(item){
				// this.uuid = e.id
				// this.stock = Number(e.count)
				// this.money = Number(e.price)
				this.stock = item.count
				this.popupShow = false;
				this.goodsSku = {
					id:item.id,
					value:item.name,
					image:item.image,
					price:item.price,
					stock:item.stock	
				}
				
				this.joinShoppingCart()
				// this.payVisible = true;
			},
			toStore(){
				uni.navigateTo({
					url:"/pages/goods/goodsStore?businessId="+this.businessId+"&businessName="+this.businessName
				})
			},
			// 购物车数量
			getShoppingCartNum(options){
				let that = this 
				that.tui.request("/basic-capi/shoppingCart/getShoppingCartNum", "get").then((res) => {
					if(res.code == 200){
						that.options[2].info = res.data.num
						that.options[2].infoColor = this.themeColor.main_color
						
					}
				}).catch((res) => {
					 
				})
			},
			// 商品详情
			getGoodsDetails(options){
				if(options.goods_id){
					let that = this;
					// 获取地址
					that.getAddress();
					// 获取商品销量
					that.getSales(options.goods_id);
					that.goods_id = options.goods_id
					
					that.businessId = options.businessId || ''
					that.tui.request("/basic-capi/goods/getGoodsDetails", "get",{
						goods_id:options.goods_id
					}).then((res) => {
						if(res.code == 200){
							
							that.businessId = res.data.list.businessId
							that.goodsDetails = res.data.list
						 
							// 查询服务保障请求
							if(JSON.parse(that.goodsDetails.serviceGuarantee_id) != '""'){
								that.serviceGuaranteeDetails(this.goodsDetails.serviceGuarantee_id)
							}
							if(JSON.parse(that.goodsDetails.label_ids) != '""')
							that.goodsLabelList(this.goodsDetails.label_ids)
							// console.log(123123,that.goodsDetails.rotationImgsJson)
							if(that.goodsDetails.rotationImgsJson){
							 
								var rotationImgsJson = JSON.parse(that.goodsDetails.rotationImgsJson)
								
								for (var i = 0; i < rotationImgsJson.length;i++) {
									rotationImgsJson[i] = that.$store.state.wechatConfig.tencent‌Domain + rotationImgsJson[i]
								}
								that.list1 = rotationImgsJson
							}
							
							
							
							// 处理多规格
						 
							if(that.goodsDetails.goodsSkuType == '多规格'){
								//  处理规格
								var goodsSkuJson = []
							 
								
								goodsSkuJson = JSON.parse(that.goodsDetails.goodsSkuJson)
								that.goodsDetails.goodsSkuJson = goodsSkuJson
								// this.specifications = goodsSkuJson
								var list = []
								goodsSkuJson.list.forEach((item,index)=>{
									list.push({
										name:item.name,
										id:index+1,
										list:[]
									})
									item.list.forEach((item1,index1)=>{
										list[index].list.push(item1.skuName)
									})
								})
								
													 
								setTimeout(()=>{
									that.specifications = list
									that.combinations = goodsSkuJson.list1
									console.log(12311111,that.combinations[0].skuPrice)
									that.goodsDetails.goodsPrice = parseFloat(that.combinations[0].skuPrice)
								},600)
									
								
							}
							if(that.goodsDetails.goodsSkuType == '单规格'){
								that.buttons.text = '立即支付'
							}
							
							
				
						}
					}).catch((res) => {
						 
						that.buttons.text = '立即支付'
					})
				}
			},
			serviceGuaranteeDetails(ids){
			 
				this.tui.request("/basic-capi/serviceGuaranteeList/list", "get",
				{
					ids:JSON.parse(ids)
				}).then(res=>{
					 
					if(res.code == 200){
						this.serviceGuaranteeList = res.data.list
					} 
					
				})
			},
			goodsLabelList(ids){
				console.log(ids)
				this.tui.request("/basic-capi/mallGoodsLabel/list", "get",
				{
					ids:JSON.parse(ids),
					useType:'微信小程序'
				}).then(res=>{
					 
					if(res.code == 200){
						this.labelList = res.data.list
					} 
					
				})
			},
			getSales(goods_id){
				this.tui.request("/basic-capi/goods/getGoodsSales", "get",
				{
					goods_id:goods_id
				}).then(res=>{
					if(res.code == 200){
						this.count = res.data.count
					} 
					
				})
			},
			getAddress(){
				this.tui.request("/basic-capi/address/addressList", "get",{
					openid:uni.getStorageSync('userInfo').openid
				}).then(res=>{
					if(res.code == 200){
						 
						this.addressList = res.data.list
					} 
					
				})
			},
			settingAddress(item,type){
				if(type == 'addSuccess'){
					this.getAddress();
				}
				this.addAddressShow = item;
			},
			delAddress(items){
				this.addressList = this.addressList.filter((item, index) => item.id !== items.id);
			},
			closeAddress(){
				this.storeShowAddress = false
			},
			getStore(options){
				this.tui.request("/basic-capi/store/getStore", "get",{
					pageNum:1,
					pageSize:10,
					businessId:this.businessId
				}).then((res) => {
					if(res.code == 200){
						this.storeList = res.data.list
						this.business_info = res.data.list[0]
						this.businessName = res.data.list[0].businessName
						this.storeList.forEach((item)=>{
							if(item.otherConfigJson){
								item.otherConfigJson =  JSON.parse(item.otherConfigJson)
								item.otherConfigJson.logo = this.wechatConfig.tencent‌Domain + item.otherConfigJson.logo
							}
						})
					}
					
				 
			
				}).catch((res) => {
					console.log(res)
				})
			},
			playMent(){
				
				
				// 余额支付逻辑
				let data = {
					goods_id:this.goods_id,
					wechat_openid:uni.getStorageSync('userInfo').openid,
					wechatphone:uni.getStorageSync('userInfo').phone,
					businessId:this.businessId,
					paypal_type:3,
					quantity:this.quantity,
					order_type:'1',
					goodsSku:this.buttons.text == '立即支付'?1:2
				}
				if(this.buttons.text == '立即支付'?1:2 == 2){
					data.money = this.money
					data.uuid = this.uuid
				}
				this.tui.request("/basic-capi/wechatApi/order/createOrder", "post",data).then(res=>{
					if(res.code == 200){
						this.payVisible = false;
						this.goodsDetails.stockNum = Number(this.goodsDetails.stockNum) - Number(this.quantity);
						this.quantity = 1;
						
						
						uni.showToast({
							title:res.message
						})
						setTimeout(()=>{
							this.getGoodsDetails(this.optionsObj)
						},2000)
					}else{
						if(res.message == '请填写您得收货地址再购买!'){
							this.storeShowAddress = true
							uni.showToast({
								title:"请填写您得收货地址再购买!"
							})
							return
						}
						uni.showToast({
							title:res.message
						})
						
					}
					
				})
				
			},
			goPayClick() {
				this.payVisible = true;

			},
			successPayHandle(item,stock) {
				console.log(item,stock)
				this.quantity = stock;
				
				if(this.business_info){
					this.business_info = JSON.stringify(this.business_info)
				}
				else
					this.business_info = ''
				
				
				this.tui.request("/basic-capi/wechatApi/order/order_confirm", "post",{
					business_id:this.businessId,
					goods_id:this.goods_id,
					order_type:5,
					paypal_type:3,
					goods_info:JSON.stringify(this.goodsDetails),
					user_info:JSON.stringify(uni.getStorageSync('userInfo')),
					business_info:this.business_info,
					goods_sku:'',
					type:'微信小程序',
					payStatus:1,
					openid:uni.getStorageSync('userInfo')['openid'],
					quantity:this.quantity
					
				}).then(res=>{
					if(res.code == 200){
						this.tui.toast('添加成功!')
						this.getShoppingCartNum();
						uni.navigateTo({
							url:"/pages/goods/goods_confirm?order_id="+res.data.order_id
						})
					}else{
						this.tui.toast(res.message)
					}
				})
				
				// if(item=='微信'){
				// 	uni.showToast({
				// 		title:'暂不支持!'
				// 	})
				// 	return
				// }
				// if(item == '余额'){
					
					
					
				// 	if(item.index == 2){
				// 		this.joinShoppingCart();
				// 	}
				// 	// this.playMent();
				// }
				
			},
			cancelPayHandle: function() {
				this.payVisible = false;
			},
			handleConfirm(e){
				this.uuid = e.id
				this.stock = Number(e.count)
				this.money = Number(e.price)
				// this.popupShow = false;
				// this.payVisible = true;
				console.log(123123,e,this.quantity)
				// 生成规格订单
				if(this.business_info){
					this.business_info = JSON.stringify(this.business_info)
				}
				else
					this.business_info = ''
				
				
				this.tui.request("/basic-capi/wechatApi/order/order_confirm", "post",{
					business_id:this.businessId,
					goods_id:this.goods_id,
					order_type:5,
					paypal_type:3,
					goods_info:JSON.stringify(this.goodsDetails),
					user_info:JSON.stringify(uni.getStorageSync('userInfo')),
					business_info:this.business_info,
					goods_sku:JSON.stringify(e),
					type:'微信小程序',
					payStatus:1,
					openid:uni.getStorageSync('userInfo')['openid'],
					quantity:e.count
					
				}).then(res=>{
					if(res.code == 200){
						this.tui.toast('添加成功!')
						this.getShoppingCartNum();
						uni.navigateTo({
							url:"/pages/goods/goods_confirm?order_id="+res.data.order_id
						})
					}else{
						this.tui.toast(res.message)
					}
				})
				
				
				
			},
			handleClose(){
				this.popupShow = false;
			},
			optionsClick(item){
				this.skuData = item
				console.log(item)
		 
				// this.tui.request("/basic-capi/wechatApi/order/order_confirm", "post",{
				// 	business_id:this.businessId,
				// 	goods_id:this.goods_id,
				// 	order_type:5,
				// 	paypal_type:3,
				// 	goods_info:JSON.parse(this.goodsDetails),
				// 	user_info:JSON.parse(this.uni.getStorageSync('userInfo')['data']),
				// 	business_info:JSON.stringify(this.business_info),
				// 	goods_sku:JSON.parse(item),
				// 	type:'微信'
					
				// }).then(res=>{
				// 	if(res.code == 200){
				// 		this.tui.toast('添加成功!')
				// 		this.getShoppingCartNum();
				// 	}else{
				// 		this.tui.toast(res.message)
				// 	}
				// })
				
				if(item.index == 2){
					this.joinShoppingCart();
				}
				
			},
			joinShoppingCart(){
				let that = this
				// that.goodsDetails
				let data = ''
				
				if(this.buttons.text == '立即支付'){
					data = {
						goods_id:that.goodsDetails.goods_id,
						goods_quantity:1,
						goods_price:that.goodsDetails.goodsPrice,
						goods_name:that.goodsDetails.goodsName,
						goods_image:that.goodsDetails.previewUrl,
						goods_subtitle:that.goodsDetails.subtitle,
						goods_sku:"",
						
					}
				}else{
					data = {
						goods_id:that.goodsDetails.goods_id,
						goods_quantity:this.stock,
						goods_price:this.goodsSku.price,
						goods_name:that.goodsDetails.goodsName,
						goods_image:that.goodsDetails.previewUrl,
						goods_subtitle:that.goodsDetails.subtitle,
						goods_sku:JSON.stringify(this.goodsSku),
					}
					
				}
				
				
				this.tui.request("/basic-capi/addUserShoppingCart/add", "post",data).then(res=>{
					if(res.code == 200){
						this.tui.toast('添加成功!')
						this.getShoppingCartNum();
					}else{
						this.tui.toast(res.message)
					}
				})
			},
			clickButton(item){
				this.money = this.goodsDetails.goodsPrice
				
				if(this.buttons.text == '立即支付'){
					this.goPayClick();
					return
				}
				this.popupShow = true;
			},
			close() {
				this.storeShow = false
			},
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.centerContent{
		// position: fixed;
		width: 100%;
		
	 
		.timeLimit{
			position: absolute;
			z-index: 8;
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
		 
			// border:1px solid #eee;
			border-top: 1px solid #eee;
			border-left: 1px solid #eee;
			border-right: 1px solid #eee;
			background: linear-gradient(180deg, var(--main-bg-color) 0%,#fff 100%);
			height: 400rpx;
			.timeColor{
				padding: 3rpx;
				color: white;
				background: var(--main-bg-color);
				width: 125px;
				display: flex ;
				justify-content: center;
				border-radius: 3px;
			}
			
			.timeFont{
				font-size: 64rpx;
				font-weight: bold;
				line-height: 32rpx;
				color: #FFFFFF;
				position: relative;
				top: 20rpx
			}
		}
		.goods{
			position: relative;
			z-index: 9;
			background: #FFFFFF;
			border-radius: 16rpx;
			// border: 1px solid #ccc;
			padding: 20rpx;
			// height: 360rpx;
			top: 130rpx;
			margin:0 20rpx;
			display: flex;
			flex-direction: column;
			border-left: 1px solid #eee;
			border-right: 1px solid #eee;
			border-bottom: 1px solid #eee;
			gap: 22rpx;
		 
			.goods-header{
				display: flex;
				justify-content: space-between;
				.goods-left{
					.goods-header-left{
						color: var(--main-bg-color);
						font-weight: bold;
						display: flex;
						gap: 20rpx;
						.label{
							padding: 6rpx 12rpx;
							color: white;
							height: 16px;
							font-size: 18rpx;
							border-radius: 8rpx;
							background-color: var(--main-bg-color);
							position: relative;
							top:13rpx;
						}
						
					}
					.huaxian{
						color: var(--main-font_assist);
						font-size: 28rpx;
						text-decoration: line-through;
						position: relative;
						left: 10rpx;
					}
				}
				
				.goods-header-right{
					color: var(--main-font_assist);
					font-size: 26rpx;
					position: relative;
					top: 20rpx;
					
				}
			}
			.goods-name{
				display: -webkit-box;
				gap: 10rpx;
				padding: 0 10rpx;
				width: 100%;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;
				font-weight: bold;
				font-size: 34rpx;
			}
			.goods-sku{
				padding: 0 10rpx;
				color: var(--main-font_assist);
				font-size: 26rpx;
			}
			.goods-type{
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 6rpx;
				.goods-type-label{
					display: flex;
					align-items: center;
					gap:6rpx;
					color: var(--main-font_assist);
				}
			}
		}
	}
	
	.time {
	    @include flex;
	    align-items: center;
	 
	    &__item {
	         color: #fff;
	         font-size: 12px;
	         text-align: center;
	     }
	}
	.indicator {
	    @include flex(row);
	    justify-content: center;
	
	    &__dot {
	      height: 6px;
	      width: 6px;
	      border-radius: 100px;
	      background-color: rgba(255, 255, 255, 0.35);
	      margin: 0 5px;
	      transition: background-color 0.3s;
	
	      &--active {
	        background-color: #ffffff;
	      }
	    }
	  }
	
	  .indicator-num {
	    padding: 2px 0;
	    background-color: rgba(0, 0, 0, 0.35);
	    border-radius: 100px;
	    width: 35px;
	    @include flex;
	    justify-content: center;
	
	    &__text {
	      color: #ffffff;
	      font-size: 12px;
	    }
	  }
	  .popupBg{
		  height: 60vh;
		  padding: 20rpx;
		  overflow-y: auto;
	  }
	  
	  .u-content {
	      // padding: 24rpx;
	      // font-size: 32rpx;
	      color: $u-content-color;
	      line-height: 1.6;
	    }
	 
	 .label{
	 	padding: 6rpx 12rpx;
	 	color: white;
	 	// height: 16px;
	 	font-size: 18rpx;
	 	border-radius: 8rpx;
	 	 
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6rpx;
	  
	 }
</style>